<template>
  <AppLayout />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import AppLayout from './components/Layout.vue';

export default defineComponent({
  name: 'App',
  components: {
    AppLayout,
  },
});
</script>

<style lang="scss">
// Global styles can remain here or be moved to a dedicated global SCSS file
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  background-color: #fff;
}

#app {
  // You might not need specific styles for #app if AppLayout handles the full viewport height
}

// Example of a container class if you want to reuse it across different components/views
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
</style>
